<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px"
          >Aside

          <router-link to="/a"> <el-button>去A页面</el-button></router-link>

          <h1>666</h1>
          <router-link to="/b"> <el-button>去B页面</el-button></router-link>
        </el-aside>
        <el-container>
          <el-header>Header</el-header>
          <el-main
            >Main
            <el-button @click="logout">退出登录</el-button>
            <router-view v-slot="{ Component }">
              <template v-if="Component">
                <transition name="slide-up" mode="out-in">
                  <keep-alive>
                    <suspense>
                      <component :is="Component"></component>
                    </suspense>
                  </keep-alive>
                </transition>
              </template>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
console.log(123)

function logout() {
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<style lang="scss">
.common-layout {
  width: 100vw;
  height: 100vh;
}
.el-container {
  width: 100vw;
  height: 100vh;
}
.el-aside {
  background-color: #d9ecff;
}
.el-header {
  background-color: #c6e2ff;
}
.el-main {
  background-color: #ecf5ff;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
